/**
 * Created by Administrator on 2018/3/18 0018.
 */

import React from 'react';
import {
    Link,
} from 'react-router-dom'

import TopBar from '../common/topbar';

class OrderList extends React.Component {
	constructor(props) {
		super();
		console.log('props.match',props.match);
		this.state = {
			id: props.match.params.id,
			data: [],
			total: '0',
		}
	}
	componentDidMount() {
		this.list();
		this.total();
	}
	list(){
		window.fetch('http://localhost:4000/order/list', {
			method: 'GET',
			mode: 'cors',
			cache: 'default',
			dataType: 'json',
		}).then((response) => {
			return response.json();
		}).then((json) => {
			this.setState({data: json.data});
		}).catch((err)=>{
			console.log(err);
		});
	}
	total(){
		window.fetch('http://localhost:4000/order/total', {
			method: 'GET',
			mode: 'cors',
			cache: 'default',
			dataType: 'json',
		}).then((response) => {
			return response.json();
		}).then((json) => {
			this.setState({total: json.data.total});
		}).catch((err) => {
			console.log(err);
		})
	}
	componentWillReceiveProps(nextProps) {

	}

	shouldComponentUpdate(nextProps, nextState) {
		return nextProps;
	}

	componentWillUpdate(nextProps, nextState) {

	}

	componentDidUpdate(prevProps, prevState) {

	}

	componentWillUnmount() {

	}
	render(){
		let d = this.state.data||{};
		let total = this.state.total||0;
		let match = this.props.match;
		let nodeList = d.map((v, k) => {
			let path = {
				pathname: `${match.url}/` + v.id + ``,
				state: v,
			};
			return (
				<li key={k}>
					<p>订单号：{v.id}</p>
					<div className="image">
						<Link to={path}>
							<img src={v.p_cover} alt=""/>
						</Link>
					</div>
					<Link to={path}>
						<p>{v.p_title}</p>
						<p>份数：{v.o_copies}</p>
						<p>金额：{v.o_price}</p>
					</Link>
				</li>
			);
		});
		return (
			<div>
				<TopBar data={this.props} title="订单列表"/>
				<div >
					<div className="total" key="total">订单总数：{total}</div>
					<ul className="ulOrderList">
						{nodeList}
					</ul>
				</div>
			</div>
		);
	}

}




export default OrderList;
